<template>
  <router-view/>
  <van-tabbar class="nav" active-color="#CEA62A" v-model="active" route v-if="route.meta.isTabbar">
    <van-tabbar-item class="
    nav-item" @change="uptActive(index)" v-for="(item,index) in tabBarList" :key="index" :to="item.path" >
      <span class="item-name">{{item.name}}</span>
      <template #icon="props">
        <img class="item-img" :src="props.active ? item.iconActive : item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const active = ref(0)
const tabBarList = ref([
  {
    name: '首页',
    icon: require('@/assets/icons/首页默认.png'),
    iconActive: require('@/assets/icons/首页.png'),
    path: '/'
  },
  {
    name: '专题',
    icon: require('@/assets/icons/专题默认.png'),
    iconActive: require('@/assets/icons/专题.png'),
    path: '/topic'
  },
  {
    name: '分类',
    icon: require('@/assets/icons/分类默认.png'),
    iconActive: require('@/assets/icons/分类.png'),
    path: '/category'
  },
  {
    name: '购物车',
    icon: require('@/assets/icons/购物车默认.png'),
    iconActive: require('@/assets/icons/购物车选中.png'),
    path: '/cart'
  },
  {
    name: '我的',
    icon: require('@/assets/icons/我的默认.png'),
    iconActive: require('@/assets/icons/我的.png'),
    path: '/mine'
  }
])
const uptActive = (val) => {
  active.value = val
}
</script>
<style lang="scss" scoped>
.nav{
  width: 100%;
  height: 100px;
  overflow: hidden;
  .nav-item{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    .item-name{
      font-size: 24px;
      line-height: 33px;
    }
    .item-img{
      margin-bottom: 9px;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
